<template>
  <div class="content">
    <div class="tableBox">
      <!-- <div class="flex" style="justify-content: flex-end;">
                <cusButton class="mb_20" type="primary" @onClick="onAdd">添加</cusButton>
            </div> -->
      <Table border :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="project">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.ovenClass }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="generalReference">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.standardGeneralAreas }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="generalStandards">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <InputNumber
                style="width:60%"
                :min="0"
                :max="1000"
                v-model="item.generalAreas"
                :precision="2"
                :active-change="false"
                v-if="data[index].value[idx].isEdit"
              ></InputNumber>
              <div v-else>{{ item.generalAreas }}</div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="specialReference">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.standardSpecialArea }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="specialStandards">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <InputNumber
                style="width:60%"
                :min="0"
                :max="2000"
                :precision="2"
                :active-change="false"
                v-model="item.specialArea"
                v-if="data[index].value[idx].isEdit"
              ></InputNumber>
              <div v-else>{{ item.specialArea }}</div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div class="flex">
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: '#1E6FFF', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = !data[index].value[idx]
                      .isEdit
                  "
                  v-if="data[index].value[idx].isEdit == false"
                >
                  编辑
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'gray', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = false;
                    getBoardRateStandardApi();
                  "
                  v-if="data[index].value[idx].isEdit == true"
                >
                  取消
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'green', padding: '0 8px' }"
                  @onClick="saveChange(item)"
                  v-if="data[index].value[idx].isEdit == true"
                >
                  保存
                </cus-button>
              </div>
            </div>
          </div>
        </template>
      </Table>

      <br />
      <div>
        <div class="titleName">其他相关标准</div>
        <div class="otherBox">
          <div
            class="otherBox-item"
            v-for="(item, index) in otherData"
            :key="index"
            @click="editOther(item, index)"
            :class="{ noBorderR: index + 1 == otherData.length }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 修改粮食定量标准 -->
    <foodstuffStandardModal
      ref="foodstuffStandardModal"
    ></foodstuffStandardModal>
    <!-- 食油定量标准 -->
    <oilStandardModal ref="oilStandardModal"></oilStandardModal>
    <!-- 黄豆定量标准 -->
    <beanStandardModal ref="beanStandardModal"></beanStandardModal>
    <!-- 米面供应比例 -->
    <riceStandardModal ref="riceStandardModal"></riceStandardModal>
    <!-- 单位退差比例 -->
    <unitBackStandardModal ref="unitBackStandardModal"></unitBackStandardModal>
    <!-- 军粮差价补贴 -->
    <armyRiceStandardModal ref="armyRiceStandardModal"></armyRiceStandardModal>
    <!-- 饲料定量标准 -->
    <feedStandardModal ref="feedStandardModal"></feedStandardModal>
    <!-- 饲料(草)费标准 -->
    <feedGrassStandardModal
      ref="feedGrassStandardModal"
    ></feedGrassStandardModal>
    <!-- 副食和燃油定量 -->
    <fuStandardModal ref="fuStandardModal"></fuStandardModal>
  </div>
</template>

<script>
import foodstuffStandardModal from "./components/foodstuffStandardModal";
import oilStandardModal from "./components/oilStandardModal";
import beanStandardModal from "./components/beanStandardModal";
import riceStandardModal from "./components/riceStandardModal";
import unitBackStandardModal from "./components/unitBackStandardModal";
import armyRiceStandardModal from "./components/armyRiceStandardModal";
import feedStandardModal from "./components/feedStandardModal";
import feedGrassStandardModal from "./components/feedGrassStandardModal";
import fuStandardModal from "./components/fuStandardModal";
import {
  getBoardRateStandard,
  saveBoardRate
} from "@/api/business/dishesModule";

export default {
  components: {
    fuStandardModal,
    foodstuffStandardModal,
    oilStandardModal,
    beanStandardModal,
    riceStandardModal,
    unitBackStandardModal,
    armyRiceStandardModal,
    feedStandardModal,
    feedGrassStandardModal
  },
  name: "standardsMng",
  data() {
    return {
      loading: false,
      data: [
        {
          name: "灶别伙食费",
          isEdit: false,
          value: []
        },
        {
          name: "其他伙食费标准",
          isEdit: false,
          value: []
        },
        {
          name: "其他伙食相关标准",
          isEdit: false,
          value: []
        }
      ],
      otherData: [
        { name: "粮食定量标准", type: 1, num: 650 },
        { name: "食油定量标准", type: 2, num: 70 },
        { name: "黄豆定量标准", type: 3, num1: 80, num2: 50 },
        { name: "米面供应比例", type: 4, num: 650 },
        { name: "单位退差比例", type: 5, num1: 0, num: 0 },
        { name: "军粮差价补贴", type: 6, num: 650 },
        { name: "饲料定量标准", type: 7, num1: 4000, num2: 158, num3: 63 },
        { name: "饲料(草)费标准", type: 8, num1: 67, num2: 78 },
        { name: "副食和燃油定量", type: 9, num1: 67, num2: 78 }
      ],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "类别",
          key: "name",
          align: "center"
        },
        {
          title: "项目",
          slot: "project",
          align: "center"
        },
        {
          title: "一般地区(参考)",
          slot: "generalReference",
          align: "center"
        },
        {
          title: "一般地区(标准)",
          slot: "generalStandards",
          align: "center"
        },
        {
          title: "特殊地区(参考)",
          slot: "specialReference",
          align: "center"
        },
        {
          title: "特殊地区(标准)",
          slot: "specialStandards",
          align: "center"
        },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ]
    };
  },
  mounted() {
    this.getBoardRateStandardApi();
  },
  methods: {
    // 禁用
    onClose(row) {
      console.log(row);
    },
    // 启用
    onOpen() {},
    // 编辑其他标准
    editOther(row, index) {
      switch (index) {
        case 0:
          this.$refs["foodstuffStandardModal"].show();
          break;
        case 1:
          this.$refs["oilStandardModal"].show();
          break;
        case 2:
          this.$refs["beanStandardModal"].show();
          break;
        case 3:
          this.$refs["riceStandardModal"].show();
          break;
        case 4:
          this.$refs["unitBackStandardModal"].show();
          break;
        case 5:
          this.$refs["armyRiceStandardModal"].show();
          break;
        case 6:
          this.$refs["feedStandardModal"].show();
          break;
        case 7:
          this.$refs["feedGrassStandardModal"].show();
          break;
        case 8:
          this.$refs["fuStandardModal"].show();
          break;
        default:
          break;
      }
    },
    // 保存
    saveChange(item) {
      console.log(item);
      this.loading = true;
      return new Promise(resolve => {
        saveBoardRate(item).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("修改成功.");
            this.getBoardRateStandardApi();
            resolve();
          }
        });
      });
    },
    // 获取伙食灶信息
    getBoardRateStandardApi() {
      this.loading = true;
      this.data[0].value = [];
      this.data[1].value = [];
      this.data[2].value = [];
      return new Promise(resolve => {
        getBoardRateStandard({}).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            res.data.forEach(element => {
              element.isEdit = false;
              if (element.boardRateType == 0) {
                this.data[0].value.push(element);
              }
              if (element.boardRateType == 1) {
                this.data[1].value.push(element);
              }
              if (element.boardRateType == 2) {
                this.data[2].value.push(element);
              }
            });
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style scoped>
/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
<style lang="less" scoped>
.content {
  // padding: 20px;
}
.tableBox {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
.titleName {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  width: 11.11111%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px 4px 0 0;
  border: 1px solid #33a5fe;
  border-bottom: none;
  background: #33a5fe;
  color: white;
  margin-top: 10px;
}

.slotBox {
  width: 100%;
  // padding: 5px 0;
  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #e3e8ee;
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.noBorderB {
  border-bottom: none !important;
}
.noBorderR {
  border-right: none !important;
}
.otherBox {
  width: 100%;
  display: flex;
  border: 1px solid #e3e8ee;
  &-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    border-right: 1px solid #e3e8ee;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
  }
  &-item:hover {
    color: #80bffe;
  }
}
</style>
